<template>
  <el-row>
    <el-col :span="24">
      <div style="font-size: 20px; font-weight: 800; margin-bottom: 12px">
        核酸检测
      </div>
    </el-col>
    <el-col :span="24">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="用户名">{{ user.username }}</el-table-column>
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="result" label="结果" />
        <el-table-column label="查看报告" min-width="100">
          <template v-slot:default="scope">
            <el-button type="success" @click="watchreport(scope.row)"
              >查看<el-icon><Edit /></el-icon
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑弹窗 -->
      <el-dialog v-model="dialogFormVisible" title="核酸结果详情" width="90%">
        <el-descriptions title="核酸结果" :column="3" border>
          <el-descriptions-item
            label="用户名"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            >{{ user.username }}</el-descriptions-item
          >
          <el-descriptions-item
            label="电话"
            label-align="right"
            align="center"
            >{{ user.phone }}</el-descriptions-item
          >
          <el-descriptions-item
            label="年龄"
            label-align="right"
            align="center"
            >{{ user.age }}</el-descriptions-item
          >
          <el-descriptions-item label="结果" label-align="right" align="center">
            <el-tag size="small" v-if="form.result == '阴性'" type="success">{{
              form.result
            }}</el-tag>
            <el-tag size="small" v-else type="danger">{{ form.result }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item
            label="类型"
            label-align="right"
            align="center"
            >{{ form.type }}</el-descriptions-item
          >
          <el-descriptions-item
            label="核酸检测时间"
            label-align="right"
            align="center"
            >{{ timeformat(form) }}</el-descriptions-item
          >
        </el-descriptions>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="closedialog"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'hesuan_result',
  data() {
    return {
      tableData: [],
      //   分页器
      pageNum: 1,
      pageSize: 10,
      small: false,
      disabled: false,
      background: false,
      total: 0,

      // 分页查询-输入框
      username: '',
      userId: null, // 初始化用户ID为空
      result: null, // 初始化结果为空
      user: localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user'))
        : {},
      form: {},
      dialogFormVisible: false,
      formLabelWidth: '80px',
      createTime: this.timeformat(new Date())
    }
  },

  methods: {
    load() {
      this.$http.get(`/hesuan/${this.userId}`).then((res) => {
        console.log(res)
        this.tableData = res.data
      })
    },
    watchreport(row) {
      console.log(row)
      this.form = JSON.parse(JSON.stringify(row))
      console.log(this.form)
      this.dialogFormVisible = true
    },
    closedialog() {
      this.dialogFormVisible = false
    },
    timeformat(row) {
      return this.$moment(row.createTime).format('yyyy-MM-DD HH:ss')
    },
  },
  created() {
    // 从localStorage中获取当前用户信息
    const user = localStorage.getItem('user')
      ? JSON.parse(localStorage.getItem('user'))
      : {}

    // 获取用户ID
    console.log(user)

    this.userId = user.id
    console.log(user.id)
    // 在页面加载完成后，调用getResult方法，获取核酸结果
    this.load()
  }
}
</script>

<style>
</style>